<template>
    <div id="edit">
        <!--博客编辑表单-->
        <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm e-from">
            <el-form-item label="标题" prop="title">
                <el-input v-model="editForm.title" minlength=“3” maxlength="25" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <!--mavon-editor编辑器-->
                <mavon-editor
                        ref="editor"
                        id="editor"
                        :toolbars="markdownOptions"
                        v-model="editForm.content"
                        :boxShadow="false"
                        @imgAdd="uploadImg"
                        @fullScreen="toFullScreen"
                        style="border: 1px solid #deddde">
                </mavon-editor>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('editForm')">发表</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    Vue.use(mavonEditor)

    import {marked} from 'marked'   //用于解析.md文本

    export default {
        name: "BlogEdit",
        data() {
            return {
                editForm: {
                    id: '',
                    title: '',
                    description: '',
                    content: ''
                },
                markdownOptions: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: false, // 下划线
                    strikethrough: true, // 中划线
                    mark: false, // 标记
                    superscript: false, // 上角标
                    subscript: false, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: true, // 保存（触发events中的save事件）
                    navigation: true, // 导航目录
                    alignleft: false, // 左对齐
                    aligncenter: false, // 居中
                    alignright: false, // 右对齐
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                },
                rules: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                    ],
                    description: [
                        { required: true, message: '请输入摘要', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.editForm.description = this.getDescription(this.editForm.content)
                        this.$axios.post('/blog/edit',this.editForm).then(res=>{
                            if(res.data.data){
                                this.$notify({
                                    title: '发表成功',
                                    duration: 2000
                                });
                                this.$router.push('/index');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getDescription(content){    //提取内容的前200个字符作为摘要
                let md = marked.parse(content);
                //去除<script>中的js
                md = md.replace(new RegExp("<script[^>]*?>[\\s\\S]*?<\\/script>",'g'),'')
                //去除<style>中的样式
                md = md.replace(new RegExp("<style[^>]*?>[\\s\\S]*?<\\/style>",'g'),'')
                //去除html标签
                md = md.replace(new RegExp("<[^>]+>",'g'),'')
                //去除空格、回车、制表符等
                md = md.replace(new RegExp("\\t|\\r|\\n",'g'),' ')

                if(md.length>200){
                    md = md.substr(0,200)+'……'
                }
                return md
            },
            uploadImg(pos, file){
                let imgData = new FormData();
                imgData.append('file',file);
                this.$axios.post('/file/upload',imgData).then(res=>{
                    this.$refs.editor.$img2Url(pos, res.data.data);
                })
            },
            toFullScreen(status){     //全屏模式的回调
                if(status){     //全屏模式
                    document.getElementById("editor").style.cssText="Z-index: 2200"
                }else {     //退出全屏模式
                    document.getElementById("editor").style.cssText="Z-index: 2000"
                }
            },
            goBack(){
                this.$router.back();
            }
        },
        mounted() {
            //设置文本编辑器的Z-index，不然默认太高会挡住其他组件
            document.getElementById("editor").style.cssText="Z-index: 2000"
        },
        created() {
            if(!this.$store.state.userInfo){ //未登陆
                if(window.history.length <= 2){   //判断有无历史记录，没有则跳到首页，有则返回上一页
                    this.$router.push('/blank')
                }else {
                    this.$router.back()
                }
                this.$store.commit('set_needLogin',{flag: true,msg: '登录之后才能发表文章'})
            }
        }
    }
</script>

<style scoped>
    #edit{
        text-align: center;
        max-width: 960px;
        margin: 0 auto;
    }
    .e-from{
        position: relative;
        right: 50px;
    }
</style>
